<template>
  <img :src="url" :alt="text">
</template>

<script>
/* eslint-disable */

/**
 * 文字图标
 *
 * 如果图片地址存在，则使用地址，如果不存在，则使用算法构建一个。
 *
 * 暂不考虑图片地址有问题的场景，解决这个问题要使用 onerror() 事件，可是如果算法产生错误，会产生无限递归的问题。
 */
export default {
    name: "SeaImageIcon"
    , props: {
        // 图片地址
        src: {type: String, default: undefined}
        // 图片地址
        , text: {type: String, default: undefined}
        // 大小
        , size: {type: Number, default: 100}
        // 图片地址
        , backgroundColor: {type: String, default: '#3388FF'}
        // 图片地址
        , fontSize: {type: String, default: '28px'}
        // 图片地址
        , fontFamily: {type: String, default: '黑体'}
    }, computed: {
        url: function () {
            if(this.src === undefined){
                return this.create(this.text);
            } else {
                return this.src;
            }
        }
    }, methods: {
        /**
         * 从画板直接构建文字图标
         *
         * @param txt
         * @returns {string}
         */
        create: function createFontIcon(txt) {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            if (txt.length > 4) {
                txt = txt.substring(0, 4);
                let w = ctx.measureText(txt).width;
                if (w > 70) {
                    txt = txt.substring(0, 2);
                }
            }

            ctx.fillStyle = this.backgroundColor;
            ctx.fillRect(0, 0, this.size, this.size);
            ctx.fillStyle = "#ffffff";
            ctx.font = this.fontSize + ' ' + this.fontFamily;
            ctx.textAlign = "center";
            ctx.fillText(txt, 50, 60);
            return canvas.toDataURL('image/png');
        }
    }
}
</script>
